<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改密码</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="container">
      <div  class="tcommonBox">
      <header>
        <h1>
          修改密码
        </h1>

        <section>
          <ul class="userInfoBox">
            <li class="username">
              <span class="leftTitle">请输入原登录密码</span>
              <el-input
                type="password"
                placeholder="密码:6-12位英文、数字、下划线"
                v-model="oldPassword" show-password>
              </el-input>
              <el-alert
                v-show="oldPasswordErr"
                :title="message"
                type="error"
                show-icon  :closable="false">
              </el-alert>
            </li>

            <li class="username">
              <span class="leftTitle">请输入新登录密码</span>
              <el-input
                type="password"
                placeholder="密码:6-12位英文、数字、下划线"
                v-model="newPassword" show-password>
              </el-input>
              <el-alert
                v-show="newPasswordErr"
                title="密码格式有误，请重新输入"
                type="error"
                show-icon  :closable="false">
              </el-alert>
            </li>

            <li class="username">
              <span class="leftTitle">确认登录密码</span>
              <el-input
                type="password"
                placeholder="密码:6-12位英文、数字、下划线"
                v-model="newPassword1" show-password>
              </el-input>
              <el-alert
                v-show="newPassword1Err"
                title="重复密码有误"
                type="error"
                show-icon  :closable="false" >
              </el-alert>
            </li>

            <div class=" saveInfobtn">
              <a class="tcolors-bg" href="javascript:void(0);" @click="updatePassword">修改</a>
            </div>

          </ul>

        </section>
      </header>

      </div>
    </div>
  </div>
</template>

<script>
import { userUpdatePassword } from '@/api/user'

export default {
  name: 'Password',
  data () { // 选项 / 数据
    return {
      oldPassword: '', // 密码
      newPassword: '', // 密码
      newPassword1: '', // 密码
      oldPasswordErr: false, // 密码
      newPasswordErr: false, // 密码
      newPassword1Err: false, // 密码
      message: ''// 错误提示原因
    }
  },
  methods: {
    updatePassword: function () {
      const that = this
      const preg = /^(\w){6,12}$/
      if (!(that.newPassword && preg.test(that.oldPassword))) {
        that.oldPasswordErr = true
        that.message = '请输入正确格式的原密码'
      } else {
        that.oldPasswordErr = false
      }

      if (that.newPassword && preg.test(that.newPassword)) {
        that.newPasswordErr = false
        if (that.newPassword == that.newPassword1) {
          that.newPassword1Err = false
        } else {
          that.newPassword1Err = true
        }
      } else {
        that.newPasswordErr = true
      }

      if (!that.newPasswordErr && !that.newPassword1Err && !that.oldPasswordErr) {
        that.fullscreenLoading = true
        userUpdatePassword(that.newPassword && that.newPassword).then((response) => {
          // 注册成功后调整到登录

        }).catch((error) => {
          that.fullscreenLoading = false
        })
      }
    }
  }
}
</script>

<style scoped>

.saveInfobtn {
      margin: 20px 0;
      text-align: center;
    }

    .saveInfobtn a {
      color: #fff;
      padding: 6px 20px;
      margin: 5px 10px;
      border-radius: 5px;
      font-size: 14px;
    }

    .el-input{
      width: 30%;
      border-radius: 4px;
    }

    .el-input input{
      border-radius: 4px;
    }
    .userInfoBox li {
      padding: 20px;

    }

    .userInfoBox li:last-child {
      border-bottom: 1px solid transparent;
    }

    /*个人设置*/
    .userInfoBox .leftTitle {
      display: inline-block;
      width: 140px;
      padding: 10px 0;
    }

    .userInfoBox{
      margin: 0 auto;
      text-align: center;
    }
</style>
